<template>
	<view>
		<u-sticky bgColor="#fafafa">
			<view class="mainpadding" style="position: relative; z-index: 12;">
				<view class="ffffff flexbetween ssbox">
					<view class="flexleft">
						<u-icon name="search" color="#999" size="20"></u-icon>
						<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords" @confirm="init" confirm-type="search">
					</view>
					<view class="rightss" @click="init">搜索</view>
				</view>
			</view>
			<view class="flexbetween" style="padding: 30rpx 30rpx 0;">
				<view class="flexcenter" @click="changescreen(1)">
					<view class="main_size bold" :class="sort_type==1?'lan_text':'hui_text'">好评</view>
					<view class="flexcolumn">
						<view class="checkshang" v-show="sort_type==1 && weigh==1"></view>
						<view class="nocheckshang" v-show="sort_type!=1 || (sort_type==1 && weigh==2)"></view>
						<view class="checkxia" style="margin-top: 5rpx;" v-show="sort_type==1 && weigh==2"></view>
						<view class="nocheckxia" style="margin-top: 5rpx;" v-show="sort_type!=1 || (sort_type==1 && weigh==1)"></view>
					</view>
				</view>
				<view class="flexcenter" @click="changescreen(2)">
					<view class="main_size bold" :class="sort_type==2?'lan_text':'hui_text'">收藏</view>
					<view class="flexcolumn">
						<view class="checkshang" v-show="sort_type==2 && weigh==1"></view>
						<view class="nocheckshang" v-show="sort_type!=2 || (sort_type==2 && weigh==2)"></view>
						<view class="checkxia" style="margin-top: 5rpx;" v-show="sort_type==2 && weigh==2"></view>
						<view class="nocheckxia" style="margin-top: 5rpx;" v-show="sort_type!=2 || (sort_type==2 && weigh==1)"></view>
					</view>
				</view>
				<view class="flexcenter" @click="changescreen(3)">
					<view class="main_size bold" :class="sort_type==3?'lan_text':'hui_text'">销量</view>
					<view class="flexcolumn">
						<view class="checkshang" v-show="sort_type==3 && weigh==1"></view>
						<view class="nocheckshang" v-show="sort_type!=3 || (sort_type==3 && weigh==2)"></view>
						<view class="checkxia" style="margin-top: 5rpx;" v-show="sort_type==3 && weigh==2"></view>
						<view class="nocheckxia" style="margin-top: 5rpx;" v-show="sort_type!=3 || (sort_type==3 && weigh==1)"></view>
					</view>
				</view>
				<view class="flexcenter" @click="changescreen(4)">
					<view class="main_size bold" :class="sort_type==4?'lan_text':'hui_text'">价格</view>
					<view class="flexcolumn">
						<view class="checkshang" v-show="sort_type==4 && weigh==1"></view>
						<view class="nocheckshang" v-show="sort_type!=4 || (sort_type==4 && weigh==2)"></view>
						<view class="checkxia" style="margin-top: 5rpx;" v-show="sort_type==4 && weigh==2"></view>
						<view class="nocheckxia" style="margin-top: 5rpx;" v-show="sort_type!=4 || (sort_type==4 && weigh==1)"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="flexcolumn" v-if="!list.data.length">
			<view class="placeholderimage"></view>
			<view class="margin_top xiaohui">暂无数据！</view>
		</view>
		<view class="mainpadding2">
			<!-- 优课 -->
			<template v-if="type==1">
				<view class="flexbetween flex_wrap">
					<view class="itemgoods ffffff radius margin_top" v-for="item in list.data" :key="item.id" @click="jumpurl('/pages_index/youkexq?id=',item.id)">
						<image :src="item.image_text" class="goodstopimg" mode=""></image>
						<view class="" style="padding: 30rpx 15rpx;">
							<view class="main_size hei_text bold xiankuan">{{item.name}}</view>
							<view class="flexbetween margin_top2">
								<view class="viplable" v-show="item.is_vip">vip</view>
								<view class="bianhao">编号：{{item.id}}</view>
							</view>
							<view class="flexbetween margin_top2">
								<view class="flexleft">
									<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
									<view class="xiaohei xiankuan margin_left1" style="width: 80rpx;">{{item.teacher.username}}</view>
								</view>
								<view class="xiaohong">￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 辅导 -->
			<template v-if="type==2">
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="jumpurl('/pages_index/fudaoxq?id=',item.id)">
					<view class="yihang hei_text bold main_size">{{item.name}}</view>
					<view class="flexleft margin_top2">
						<view class="viplable margin_right" v-show="item.is_vip">vip</view>
						<view class="bianhao">编号：{{item.id}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
							<view class="xiaohei margin_left1">{{item.teacher.username}}</view>
						</view>
						<view class="xiaohong">￥{{item.price}}</view>
					</view>
				</view>
			</template>
			<!-- 测试 -->
			<template v-if="type==3">
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id"  @click="jumpurl('/pages_index/ceshixq?id=',item.id)">
					<view class="yihang hei_text bold main_size">{{item.name}}</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft ">
							<view class="viplable margin_right" v-show="item.is_vip">vip</view>
							<view class="bianhao">编号：{{item.id}}</view>
						</view>
						<view class="xiaohong">￥{{item.price}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
							<view class="xiaohei margin_left1">{{item.teacher.username}}</view>
						</view>
						<view class="listbtnlan" v-if="!item.is_free" @click.stop="kecheng_pay(item.id)">立即购买</view>
						<view class="listbtnlan" v-if="item.is_free" @click="jumpurl('/pages_mine/ceshitjq?id=',item.id)">立即考试</view>
					</view>
				</view>
			</template>
			<!-- 资料 -->
			<template v-if="type==4">
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="jumpurl('/pages_index/ziliaoxq?id=',item.id)">
					<view class="yihang hei_text bold main_size">{{item.name}}</view>
					<view class="flexleft margin_top2">
						<view class="viplable margin_right" v-show="item.is_vip">vip</view>
						<view class="bianhao">编号：{{item.id}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
							<view class="xiaohei margin_left1">{{item.teacher.username}}</view>
						</view>
						<view class="xiaohong">￥{{item.price}}</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type:"",//分类1=优课,2=辅导,3=测试,4=资料
				city:"",//城市
				education_grade_id:"",//年级id
				period:"",//学段1=小学,2=初中,3=高中,4=大学
				education_subject_id:"",//学科id
				education_classhour_id:"",//课时子id
				keywords:"",
				sort_type:"",
				weigh:"",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data));
			this.type = data.type
			this.city = data.city
			this.education_grade_id = data.education_grade_id
			this.period = data.period
			this.education_subject_id = data.education_subject_id
			this.education_classhour_id = data.education_classhour_id
			if(data.type==1){
				uni.setNavigationBarTitle({
					title:"优课"
				})
			}else if(data.type==2){
				uni.setNavigationBarTitle({
					title:"辅导"
				})
			}else if(data.type==3){
				uni.setNavigationBarTitle({
					title:"测试"
				})
			}else if(data.type==4){
				uni.setNavigationBarTitle({
					title:"资料"
				})
			}
			this.init()
		},
		methods: {
			kecheng_pay(id) {
				httpRequest.request('/api/lesson/create_order', 'POST', {
					education_lesson_id: id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let data = {
							pay_price: res.data.pay_price,
							order_id: res.data.order_id
						}
						uni.redirectTo({
							url: '/pages_index/kechengddzf?msg=' + encodeURIComponent(JSON
								.stringify(data))
						})
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 获取行业咨询列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/lesson/getlist', 'GET', {
					page: page || 1,
					education_grade_id:this.education_grade_id,
					period:this.period,
					education_subject_id:this.education_subject_id,
					education_classhour_id:this.education_classhour_id,
					type:this.type,
					keywords:this.keywords,
					sort_type:this.sort_type,
					weigh:this.weigh
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changescreen(val){
				if(this.sort_type == val){
					this.weigh = this.weigh==1?2:1
				}else{
					this.sort_type = val
					this.weigh = 1
				}
				this.init()
			},
			jumpurl(url,id){
				uni.navigateTo({
					url:url+id
				})
			},
		}
	}
</script>

<style>

</style>
